<template>
  <div id="app" @mousedown="startDrag">
    <!-- 悬浮窗口的内容 -->
    <router-view
      class="floating-window1"
      :style="{ top: position.y + 'px', left: position.x + 'px' }"
    />
    <div
      v-if="isShow"
      @mousedown="startDrag1"
      class="floating-window"
      :style="{ top: position1.y + 'px', left: position1.x + 'px' }"
    >
      <RightPartVue />
    </div>
  </div>
</template>
<script>
import RightPartVue from "./views/login/RightPartVue.vue";
import "@/filter/flexible"; //rem字体文件
import { mapGetters } from "vuex";
export default {
  components: {
    RightPartVue,
  },
  computed: {
    ...mapGetters({
      isShow: "getIsShow",
    }),
  },
  data() {
    return {
      position: { x: 100, y: 0 }, // 悬浮窗口的初始位置
      dragging: false, // 是否正在拖动
      startX: 0, // 鼠标按下的X坐标
      startY: 0, // 鼠标按下的Y坐标

      position1: { x:100, y: 0 }, // 悬浮窗口的初始位置
      dragging1: false, // 是否正在拖动
      startX1: 0, // 鼠标按下的X坐标
      startY1: 0, // 鼠标按下的Y坐标
    };
  },
  created() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    console.log(width,'ww');
    console.log(height,'hh');
    this.position.x =  width / 10
    this.position1.x =  width / 2

    let positionX = localStorage.getItem("positionX");
    let positionY = localStorage.getItem("positionY");
    if (positionX && positionY) {
      this.position.x = positionX;
      this.position.y = positionY;
    }

    let positionX1 = localStorage.getItem("positionX1");
    let positionY1 = localStorage.getItem("positionY1");
    if (positionX1 && positionY1) {
      this.position1.x = positionX1;
      this.position1.y = positionY1;
    }
  },
  methods: {
    startDrag(event) {
      console.log(event, "ee");
      if (this.dragging1) {
        return;
      }
      this.dragging = true;
      this.startX = event.clientX - this.position.x;
      this.startY = event.clientY - this.position.y;
      document.addEventListener("mousemove", this.onDrag);
      document.addEventListener("mouseup", this.stopDrag);
    },
    onDrag(event) {
      if (this.dragging) {
        this.position.x = event.clientX - this.startX;
        this.position.y = event.clientY - this.startY;
      }
    },
    stopDrag() {
      this.dragging = false;
      console.log(this.position.x);
      console.log(this.position.y);
      localStorage.setItem("positionX", this.position.x);
      localStorage.setItem("positionY", this.position.y);
      document.removeEventListener("mousemove", this.onDrag);
      document.removeEventListener("mouseup", this.stopDrag);
    },
    startDrag1(event) {
      console.log(event, "e123e");
      this.dragging1 = true;
      this.startX1 = event.clientX - this.position1.x;
      this.startY1 = event.clientY - this.position1.y;
      document.addEventListener("mousemove", this.onDrag1);
      document.addEventListener("mouseup", this.stopDrag1);
    },
    onDrag1(event) {
      if (this.dragging1) {
        this.position1.x = event.clientX - this.startX1;
        this.position1.y = event.clientY - this.startY1;
      }
    },
    stopDrag1() {
      this.dragging1 = false;
      console.log(this.position1.x, 99);
      console.log(this.position1.y, 88);
      localStorage.setItem("positionX1", this.position1.x);
      localStorage.setItem("positionY1", this.position1.y);
      document.removeEventListener("mousemove", this.onDrag1);
      document.removeEventListener("mouseup", this.stopDrag1);
    },
  },
};
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.floating-window {
  width: 35vw;
  height: 100%;
  position: absolute;
  /* width: 200px;
  height: 150px; */
  /* left: 0;
  right: 0;
  margin: 0 auto; */
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: move;
  display: flex;
}
.floating-window1 {
  width: 35vw;
  height: 100%;
  position: absolute;
  //background-image: url("~@/assets/images/biankuang.png");
  //background-size: cover; /* 图片覆盖整个容器 */
  //background-repeat: no-repeat; /* 防止图片重复 */
  //background-position: center; /* 图片居中显示 */
  //padding: 2%;
  /* width: 200px;
  height: 150px; */
  /* left: 0;
  right: 0;
  margin: 0 auto; */
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: move;
  display: flex;
}
</style>
